<template>
    <el-card class="!border-none " shadow="never">
        
        <el-form class="-mb-4" :model="queryFormData" label-width="98px" inline>
            <div class="grid grid-cols-4 gap-4">
                <div>
                    <el-form-item label="公司名称">
                        <el-input
                            placeholder="请输入公司名称"
                            
                            class="w-64"
                            v-model="queryFormData.companyName"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                
                <div>
                    <el-form-item label=电话>
                        <el-input
                            placeholder="请输入电话"
                            
                            class="w-64"
                            v-model="queryFormData.companyPhone"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        
                        </el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="模糊地址">
                        <el-input
                            class="w-64"
                            placeholder="请输入模糊地址"
                            
                            v-model="queryFormData.companyAddress"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        </el-input>
                    </el-form-item>
                </div>
                
                
                <div v-if="!showMore">
                    <el-form-item label="公司省份">
                        <el-input
                            class="w-64"
                            placeholder="请输入公司省份"
                            
                            v-model="queryFormData.economize"
                            clearable
                            @keyup.enter="resetOnePage"
                        >
                        </el-input>
                    </el-form-item>
                </div>
 
                
                <div class="flex flex-row-reverse">
                    <el-form-item>
                        <div class="flex-1  flex flex-row-reverse  w-full ">
                            <el-button class="mx-2" type="primary" @click="getPageLists">查询</el-button>
                            <el-button class="mx-2" @click="resetParams">重置</el-button>
                        </div>
                    
                    </el-form-item>
                </div>
            
            </div>
        </el-form>
    </el-card>
    
    
    <el-card class="!border-none mt-5" shadow="never">
        <div class="flex justify-between items-center">
            <div>
                <el-button type="primary" @click="handleCreate()">
                    <template #icon>
                        <icon name="el-icon-Plus"/>
                    </template>
                    添加客户
                </el-button>
            </div>
            <div class="flex">
                <Upload
                    mapping="crm/corporation"
                    class="mr-3"
                    type="excel"
                    :show-progress="true"
                    @change="refresh"
                >
                    <el-button type="danger">本地上传</el-button>
                </Upload>
                
                <el-button type="warning" @click="down">模版下载</el-button>
            
            </div>
        </div>
        
        
        <el-table
            ref="tableRef"
            size="large"
            class="mt-2"
            v-loading="pagerData.loading"
            :data="pagerData.lists"
            row-key="id"
        >
            <el-table-column label="公司名称" fixed prop="companyName" :show-overflow-tooltip="true" min-width="200"/>
            <el-table-column label="电话" prop="companyPhone" min-width="120"/>
            <el-table-column label="法人" prop="legalPersonName" min-width="90"/>
            <el-table-column label="详细地址" prop="companyAddress" min-width="200"/>
            <el-table-column label="年份" prop="yearCode" min-width="90"/>
            <el-table-column label="Max" prop="max" min-width="90"/>
            <el-table-column label="总计" prop="count" min-width="90"/>
            <el-table-column label="创建时间" prop="createTime " min-width="150" :formatter="formatterCreateTime"/>
            <el-table-column label="操作" width="170" fixed="right">
                
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        link
                        @click="handleRowDetail(row)"
                    >
                        详情
                    </el-button>
                    
                    <el-button
                        type="primary"
                        link
                        @click="handleEdit(row)"
                    >
                        编辑
                    </el-button>
                    
                    
                    <el-button
                        type="danger"
                        link
                        @click="handleDelete(row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination v-model="pagerData" @change="getPageLists"/>
    </el-card>
    
    <Detail ref="detailRef" @close="showDetailRef=false" v-if="showDetailRef"/>

</template>

<script lang='ts' setup>


import {usePagerManager} from "@/manager/base/PagerManager";


import router from "@/base/router";
import routerManager from "@/manager/base/RouterManager";
import feedback from "@/utils/feedback";

import {UnwrapNestedRefs} from "@vue/reactivity";

import {deleteCorporationInfo, downExcel, getCorporationListByPage} from "@/api/logistics/CrmCorporationController";
import CrmCorporationSearchRequest from "@/api/logistics/request/CrmCorporationSearchRequest";
import {useFormatterTimeManager} from "@/manager/base/FormatterManager";
import Detail from "@/views/logistics/client/crporation/detail.vue";

const detailRef = shallowRef(Detail)
const showMore = ref(true)
const showDetailRef = ref(false)
let {formatterCreateTime} = useFormatterTimeManager();


let queryFormData: UnwrapNestedRefs<CrmCorporationSearchRequest> = reactive(new CrmCorporationSearchRequest())

const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: getCorporationListByPage,
    params: queryFormData
})

function handleCreate() {
    let routePathByName = routerManager.getRoutePathByName("logistics/client/crporation/create");
    if (routePathByName) {
        router.push(routePathByName)
    }
}


async function handleEdit(row: any) {
    let routePathByName = routerManager.getRoutePathByName("logistics/client/crporation/edit");
    if (routePathByName) {
        await router.push({path: routePathByName, query: {id: row.id}});
    }
}


async function handleRowDetail(row: any) {
    let routePathByName = routerManager.getRoutePathByName("logistics/client/crporation/detail");
    if (routePathByName) {
        await router.push({path: routePathByName, query: {id: row.id}});
    }
}

async function handleDelete(row: any) {
    await feedback.confirm("确定删除这条公司信息吗？")
    await deleteCorporationInfo({id: row.id})
    await getPageLists()
}

function refresh() {
    getPageLists()
}

function down() {
    downExcel()
}

onMounted(() => {
    getPageLists()
})


</script>

